<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">余额</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="user_pay_a">
				<view class="user_pay_a_a">
					<view class="user_pay_a_a_a">我的余额</view>
					<view class="user_pay_a_a_b">
						<price-format :price="user_info.user_money" firstSize='72' secondSize='36' :showSubscript="false"></price-format>
						<span>元</span>
					</view>
				</view>
				<view class="user_pay_a_b" @click="goPage('/pages/user/user_recharge_log')">明细</view>
			</view>
			<view class="user_pay_d">
				<view class="user_pay_d_a">输入金额</view>
				<view class="user_pay_d_b">
					<view class="user_pay_d_b_a">￥</view>
					<view class="user_pay_d_b_b">
						<input v-model="money" type="number"  placeholder="请输入充值金额" placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"/>
					</view>
				</view>
				<view class="user_pay_d_c">
					<view class="user_pay_d_c_a" v-for="(item, index) in recharge_template_list" @click="order_click(item.id)" :class="recharge_id==item.id?'user_pay_d_c_aa':''">
						<view class="user_pay_d_c_aaa">
							<view class="user_pay_d_c_a_a">¥{{item.money}}</view>
							<view class="user_pay_d_c_a_b">{{item.tips}}</view>
						</view>
					</view>
				</view>
			</view>
<!-- 			<view class="user_pay_b">
				<view class="user_pay_b_b">选择支付方式</view>
				<view class="user_pay_b_a" :class="is_pay==1?'user_pay_b_aa':''" @click="pay_click(1)">
					<view class="user_pay_b_a_a" :style="'background-image:url('+(wx)+');'">微信</view>
					<view class="user_pay_b_a_b" :class="is_pay==1?'user_pay_b_a_bb':''" :style="'background-image:url('+xuanzhong+');'"></view>
				</view>
				<view class="user_pay_b_a" :class="is_pay==2?'user_pay_b_aa':''" @click="pay_click(2)">
					<view class="user_pay_b_a_a" :style="'background-image:url('+(tuandui_pay)+');'">
						<view class="user_pay_b_a_a_a">佣金</view>
						<view class="user_pay_b_a_a_b">可用佣金{{user_info.earnings}}元</view>
					</view>
					<view class="user_pay_b_a_b" :class="is_pay==2?'user_pay_b_a_bb':''" :style="'background-image:url('+xuanzhong+');'"></view>
				</view>
			</view> -->
			<view class="user_pay_c_a" @click="order_click('')">确认充值</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';	
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			xuanzhong:request.baseUrl_img+'/img/xuanzhong.png',
			wx:request.baseUrl_img+'/img/wx.png',
			tuandui_pay:request.baseUrl_img+'/img/tuandui_pay.png',
			is_pay:1,
			uid:0,
			user_info:[],
			recharge_template_list:[],
			money:'',
			distribution_code:'',
		}
	},
	onLoad: function (options) {
		this.distribution_code=options.distribution_code??'';
		this.recharge_template_click();
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.user_click();
	},
	methods: {
		recharge_template_click(){
			let paramsList = {
				
			}
			let optsList = {
				url: 'r-recharge_template',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					_this.recharge_template_list=res.data.data;
				}
			});
		},
		goPage(url) {
			if (!this.$util.isLogin()) {
				return;
			}
			uni.navigateTo({
				url
			});
		},
		order_click(id = ''){
			if (id == '') {
				if(this.money=='' || this.money=='0'){
					uni.showToast({
						title: '充值金额必须大于0',
						icon:'none',
						duration: 2000
					});
					return;
				}
			}
			let paramsList = {
				money:this.money,//支付金额
				uid:this.uid,//终点联系人id
				template_id:id
			}
			let optsList = {
				url: 'r-recharge_buy',
				method: 'post'
			};
			uni.showLoading({
				title: '提交中',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					_this.money='';
					uni.navigateTo({
						url: '/pages/confirm_order/order_details?order_sn='+res.data.data.order_sn+'&from=recharge'
					})
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none',
						duration: 2000
					});
				}
			});
		},
		user_click(){
			let paramsList = {
				'uid':this.uid
			}
			let optsList = {
				url: 'u-role_config',
				method: 'post'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					_this.user_info=res.data.data.user_info;
				}
				this.showLoading=false;
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.user_pay_a{
		width: 750rpx;
		height: 200rpx;
		background-color: #ffffff;
		padding: 68rpx 44rpx 30rpx 44rpx;
	}
	.user_pay_a_a{
		float: left;
	}
	.user_pay_a_a_a{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	.user_pay_a_a_b{
		font-size: 72rpx;
		font-family: DINPro;
		font-weight: 800;
		color: #000000;
	}
	.user_pay_a_a_b span{
		font-size: 30rpx;
	}
	.user_pay_a_b{
		float: right;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 100rpx;
	}
	.user_pay_d{
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 35rpx 30rpx;
		overflow: hidden;
	}
	.user_pay_d_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	.user_pay_d_b{
		width: 700rpx;
		height: 100rpx;
		background:#F8F8F8;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}
	.user_pay_d_b_a{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #222222;
		float: left;
		line-height: 100rpx;
		height: 100rpx;
		width: 78rpx;
		text-align: center;
	}
	.user_pay_d_b_b{
		float: left;
		width:560rpx;
		height: 100rpx;
	}
	.user_pay_d_b_b input{
		width: 560rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #222222;
	}
	.user_pay_d_c{
		height:auto;
	}
	.user_pay_d_c_a{
		width:33.33%;
		height:auto;
		float: left;
		margin-top: 25rpx;
	}
	.user_pay_d_c_aaa{
		border:1rpx solid #efefef;
		border-radius: 4rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 98%;
		padding: 20rpx 0;
		border-radius: 20rpx;
	}
	.user_pay_d_c_a_a{
		font-size: 34rpx;
	}
	.user_pay_d_c_a_b{
		color: #666666;
	}
	.user_pay_d_c_aa{
		color: #FFFFFF;
		background: #DA0909;
	}
	
	
	.user_pay_b{
		width: 700rpx;
		margin: auto;
		padding: 29rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.user_pay_b_b{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 80rpx;
	}
	.user_pay_b_a{
		height: 100rpx;
		line-height: 100rpx;
		color:#333333;
		font-size: 28rpx;
		font-family: PingFangSC-regular;
		background: #fff;
		border-radius: 20rpx;
	}
	.user_pay_b_aa{
		background: #F0F9F6;
	}
	.user_pay_b_a_a{
		float: left;
		background-position:25rpx;
		background-repeat: no-repeat;
		background-size: 60rpx;
		padding-left: 105rpx;
	}
	.user_pay_b_a_a_a{
		line-height: 100rpx;
		float: left;
	}
	.user_pay_b_a_a_b{
		float: left;
		font-size: 24rpx;
		color: #ccc;
		line-height: 100rpx;
		margin-left: 30rpx;
	}	
	.user_pay_b_a_b{
		width: 36rpx;
		height: 36rpx;
		float: right;
		background-color: #E5E5E5;
		background-repeat: no-repeat;
		background-position:center;
		background-size: 21rpx 15rpx;
		border-radius: 50%;
		margin-top: 35rpx;
		margin-right: 35rpx;
	}
	.user_pay_b_a_bb{
		background-color:#DA0909;
	}
	.user_pay_c_a{
		width: 640rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFangSC-regular;
		text-align: center;
		background-color:#E71102;
		margin: auto;
		margin-top: 80rpx;
	}
</style>
